import React, { Component, useEffect, useState } from "react";
import { Image, View } from "@tarojs/components";
import { AtAvatar, AtDivider, AtTabs, AtTabsPane } from "taro-ui";

import Taro from "@tarojs/taro";

import NavBar from "../fit";
import "./look.scss";

const Look = () => {
  
  //已完成
  const [list] = useState([
    {
      title: "我的营养计划",
      imgsrc: "",
      name: "营养师名字",
      content:
        "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
    },
    {
      title: "aa",
      name: "bb",
      content:
        "bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"
    }
  ]);
  const List = list.map(content => (
    <View className="list">
      <View className="listlist">
        <View className="title">{content.title}</View>
        <View className="name">
          <AtAvatar circle size="small" image={content.imgsrc} />
          <View className="namename">{content.name}</View>
        </View>
        <View className="content">{content.content}</View>
        {/*<AtDivider height="50"/>*/}
      </View>
    </View>
  ));

  const toBack = () => {
    Taro.navigateBack().then();
  };

  return (
    <View className="box">
      <View className="aa">
        <NavBar
          back={true}
        />
        <View className="box2">我的营养文章</View>
      </View>
      <View className="box3">{List}</View>
    </View>
  );
};
export default Look;
